<template>
  <el-container>
    <el-header>注册账户</el-header>
    <el-main>
      <el-row>
        <el-col :span="8" :offset="8">
          <div id="registerBox">
            <div style="height: 50px;">
              用&nbsp;&nbsp;户&nbsp;&nbsp;名：
              <el-input v-model="username" placeholder="请输入用户名"></el-input>
            </div>
            <br>
            <div class="title-input">
              密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：
              <el-input v-model="password" placeholder="请输入密码"></el-input>
            </div>
            <br>
            <div class="title-input">
              确认密码：
              <el-input v-model="passwordDeter" placeholder="请再次输入密码" @blur="checkPassword()"></el-input>
            </div>
            <br>
            <div class="title-input">
              真实姓名：
              <el-input v-model="name" placeholder="请输入真实姓名"></el-input>
            </div>
            <br>
            <div class="title-input">
              专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：
              <el-input v-model="major" placeholder="请选择专业"></el-input>
            </div>
            <br>
            <div class="title-input">
              联系电话：
              <el-input v-model="phone" placeholder="请输入电话"></el-input>
            </div>
            <br>
            <div class="title-input">
              通讯地址：
              <el-input v-model="address" placeholder="请输入地址"></el-input>
            </div>
            <br>
            <div class="title-input">
              入学时间：
              <el-date-picker
                  style="width: 50%"
                  type="date"
                  v-model="enrollment"
                  placeholder="选择日期">
              </el-date-picker>
            </div>
            <br>
            <div class="title-input">
              备注信息：
              <el-input
                  style="width: 50%;"
                  type="textarea"
                  :rows="2"
                  placeholder="请输入备注信息"
                  v-model="remark">
              </el-input>
            </div>
            <br>
            <div class="title-input" style="margin-top: -10px">
              <el-button type="primary" style="width: 80%;" @click="register()">注册</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import {userRegister} from "@/api/user";

export default {
  name: "UserRegisterFront",
  data() {
    return {
      username: '',
      password: '',
      passwordDeter: '',
      name: '',
      major: '',
      phone: '',
      address: '',
      remark: '',
      enrollment: '',
      percent: 0
    }
  },
  methods: {
    format(percentage) {
      return percentage === 100 ? '满' : `${percentage}%`;
    },
    checkPassword() {
      if (this.passwordDeter !== this.password) {
        this.$message.error("请输入相同密码");
        this.passwordDeter = ''
      }
    },
    register() {
      userRegister({
        username: this.username,
        password: this.password,
        name: this.name,
        major: this.major,
        phone: this.phone,
        address: this.address,
        enrollment: this.enrollment,
        remark: this.remark,
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
        } else
          this.$message.error("注册失败")
      })
    }
  }
}
</script>

<style scoped>
#registerBox {
  background-color: #eee;
  border-radius: 15px;
  margin-top: 5%;
  padding-top: 15px;
  padding-bottom: 15px;
  font-family: "Adobe 宋体 Std L";
}

.el-input {
  height: 45px;
}

.title-input {
  height: 50px;
  margin-top: -40px;
}

.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 45px;
}
</style>